<?php
    function menuon($url){
        global $_GPC;
        if(empty($url)){
            return;
        }
        $r = strstr($url,"r=");
        $r = str_replace('r=', '', $r);
        if(strcasecmp($_GPC['r'], $r) == 0){
            return 'on';
        }
        return;
    }
?>

<link rel="stylesheet" type="text/css" href="{php echo MX_SHOP_LOCAL}static/fonts/iconfont.css?v=2017070719">

<link href="{php echo MX_SHOP_LOCAL}static/css/divmenu/foxui.diy.css?v=201705261600"rel="stylesheet"type="text/css"/>
<style type="text/css">
    .diymenu .item .inner {background: {$diymenu['style']['bgcolor']};}
    .diymenu .item .inner:before,
    .diymenu .item .inner:after {border-color: {$diymenu['style']['bordercolor']};}
    .diymenu .item .inner .text {color: {$diymenu['style']['textcolor']};}
    .diymenu .item .inner .icon {color: {$diymenu['style']['iconcolor']};}
    .diymenu .on .inner {background: {$diymenu['style']['bgcoloron']};}
    .diymenu .on .inner .text {color: {$diymenu['style']['textcoloron']};}
    .diymenu .on .inner .icon {color: {$diymenu['style']['iconcoloron']};}
    .diymenu .item .child {border-color: {$diymenu['style']['childbordercolor']}; background-color: {$diymenu['style']['childbgcolor']};}
    .diymenu .item .child a {color: {$diymenu['style']['childtextcolor']};}
    .diymenu .item .child a:after {border-color: {$diymenu['style']['childbordercolor']}; color: {$diymenu['style']['childtextcolor']};}
    .diymenu .item .child .arrow:before {background: {$diymenu['style']['childbordercolor']};}
    .diymenu .item .child .arrow:after {background: {$diymenu['style']['childbgcolor']};}
    .diymenu .item .inner .badge {background: {$diymenu['style']['cartbgcolor']};}
</style>

<div class="diymenu" style="{if !is_mobile()} position: absolute;max-width: 750px;{else}position: fixed;{/if}">
    {loop $diymenu['data'] $item}
    <div class="item item-col-{php echo count($diymenu['data'])} {if count($item['child'])==0 && $diymenu['params']['navstyle']==0}{php echo menuon($item['linkurl'])}{/if}" {if count($item['child'])>0 && $diymenu['params']['navstyle']==0}onclick="showSubMenu(this)"{else}onclick="location.href = '{$item['linkurl']}'"{/if} {if strstr($item['linkurl'], 'r=member.cart')}id="menucart"{/if}>
    <div class="inner {if $diymenu['params']['navstyle']==1}image{/if} {$diymenu['params']['navfloat']}">
        {if strstr($item['linkurl'], 'r=member.cart') && $cartcount>0 && $diymenu['params']['cartnum']==1}
        <span class="badge">{$cartcount}</span>
        {/if}
        {if $diymenu['params']['navstyle']==0}

        {if !empty($item['iconclass'])}
        <span class="icon {$item['iconclass']} {$diymenu['params']['navfloat']}"></span>
        {/if}
        <span class="text {$diymenu['params']['navfloat']}" {if empty($item['iconclass'])} style="margin-top: 10px; font-size: 15px;"{/if}>{$item['text']}</span>
        {elseif $diymenu['params']['navstyle']==1}
        <img src="{php echo tomedia($item['imgurl'])}" />
        {/if}
    </div>
    {if count($item['child'])>0 && $diymenu['params']['navstyle']==0}
    <div class="child">
        {loop $item['child'] $child}
        {if !empty($child['text'])}
        <a href="{$child['linkurl']}" class="external">{$child['text']}</a>
        {/if}
        {/loop}
        <span class="arrow"></span>
    </div>
    {/if}
</div>
{/loop}
</div>

{if $diymenu['params']['navstyle']==0}
<script>
    function showSubMenu(obj) {
        $(obj).toggleClass('on').siblings().removeClass('on');
        $(obj).find('.child').toggleClass('in');
        $(obj).siblings().find('.child').removeClass('in')
    }


    $(function () {
        var len = $(".diymenu .child").length;
        $(".diymenu .child").each(function (i) {
            var width = $(this).outerWidth();
            var margin = -(width / 2);
            var left = '50%';
            var pleft = $(this).position().left - width / 2;
            if(i==0 && pleft<2){
                left = 2;
                margin = 0;
                var pwidth = $(this).closest('.item').width();
                var arrowleft = pwidth / 2;
                var oldleft = parseFloat( $(this).find('.arrow').css('left').replace('px','') );
                $(this).find('.arrow').css({'left': arrowleft-10, 'margin-left': 0});
            }
            else if(i+1==len) {
                var thisleft = parseFloat( $(this).offset().left.toString().replace('px',''));
                if((thisleft+width)>$(document).width()){
                    var pleft = $(this).closest('.item').offset().left;
                    left =  $(document).width() - width - 2 - pleft;
                    margin = 0;
                    var pwidth = $(this).closest('.item').width();
                    var itemleft = (pwidth / 2) + pleft;
                    var childleft = $(document).width() - width - 2;
                    var arrowleft = itemleft - childleft;
                    $(this).find('.arrow').css({'left': arrowleft-10, 'margin-left': 0});
                }
            }


            $(this).css({'position': 'absolute', 'left': left, 'margin-left': margin, 'z-index': 0});
        })
    })
</script>
{/if}